<%@page import="com.yu.bean.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<title>个人设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- Bootstrap -->
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  
	<!--侧边栏引用  -->
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet  prefetch">
	<link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet  prefetch">
	<link rel="stylesheet" href="${APP_PATH}/static/user/css/style.css" media="screen" type="text/css" />


	<!--提交表单的js  -->
	<script src="${APP_PATH}/static/user/css/person_data.js" charset="utf-8"></script>
	<script src="${APP_PATH}/static/user/css/search.js" charset="utf-8"></script>
	<!--下拉菜单 -->
	<link rel="stylesheet" href="${APP_PATH}/static/user/css/menu.css" type="text/css" />
	<!-- 底部导航栏 -->
	<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/ulogin/Css/bundle.0e5348ee.css" />
	 <!-- layui -->
	<link rel="stylesheet" href="${APP_PATH}/static/user/layui/css/layui.css"  media="all">
	
</head>
<body>
	
	<!-- ****************************************************头顶部分******************************************* -->
    <div style ="height:80px; width: 100%;background-color:#aa2116">
	    <div style= "float: left;line-height:80px; height: 80px;width: 50%;padding-left:5%;" >
	    <label style="font-size: 36px;font-family:华文彩云">AnimeSky</label>
	    </div>
	    <div style="float:right;line-height:80px; height: 80px;width: 50%; text-align: right; padding-right: 80px; ">
			      <% User u = (User)session.getAttribute("u"); 
                	   String uName;
                	   if(u == null ){
                		  // request.getRequestDispatcher("ulogin.jsp").forward(request, response);
                		    uName = "";
                	   }else{
                		   uName = u.getUserName();
                	   }
                	%>
             <c:set value="${APP_PATH}/static/user/pic/01.jpg" var="p" ></c:set>
		    <c:if test="${u.upic ne null}">
		    <c:set value="${u.upic}" var="p"></c:set>
		    </c:if>
			<div class="dropdown">
			  <a class="dropa"><img style=" border-radius:16px; width:32px; height:32px;" src="${p}">&nbsp;&nbsp;${u.userName}</a>
			  <div class="dropdown-content" style="text-align:center;">
			    <a href="" onclick="Logout()">退出</a>
			  </div>
			</div>
			 <input type="hidden" value="${u.userId }" id = "u_id" >
			
	    </div>
    </div>
	<!--*********************************************************************************************************** -->
	<div style="width:100%; height:580px; margin-top:32px;">
	<div style="width:24%;height:580px;float:left;background-color: #eee;border:2px solid #F5DEB3">
	  <div class="container" style="width:92%;margin-left:8%;">
		<nav>
			<ul class="mcd-menu">
			<li > <!--class="float"   -->
					<a class="search">
						<input type="text" placeholder="search ...">
						<button><i class="fa fa-search"></i></button>
					</a>
				    <!--<a href="" class="search-mobile" > 
						<i class="fa fa-search"></i>
					</a> -->
				</li>
				
				<li>
					<a href="${APP_PATH}/user/recommend" >
						<i class="fa fa-film"></i>
						<strong>每日推荐</strong>
						<small>recommend</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/showAllCollectionVideo" >
						<i class="fa fa-heart-o"></i>
						<strong>我的收藏</strong>
						<small>my collection</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/history">
						<i class="fa fa-history"></i>
						<strong>历史记录</strong>
						<small>history</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/vip">
						<i class="fa fa-vcard"></i>
						<strong>我的会员</strong>
						<small>my vip</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/message">
						<i class="fa fa-comments-o"></i>
						<strong>我的消息</strong>
						<small>my message</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/upload">
						<i class="fa fa-upload"></i>
						<strong>我的上传</strong>
						<small>my uploading</small>
					</a>
				</li>
				<li>
					<a href="${APP_PATH}/user/person_setting" class="active">
						<i class="fa fa-user-o"></i>
						<strong>资料设置</strong>
						<small>person setting</small>
					</a>
				</li>
				
			</ul>
		</nav>
	</div>
</div>
 
 <div style="height:580px;width:75%; float:right;background-color:#EEE">
<div class="site-demo-upload" style="position:relative;left:36%;width:126px;">
  <img id="picView"style="width:126px;height:126px; border:2px solid white; border-radius:50%;"
   src="${p}">
  <div class="site-demo-upbar" style="position:absolute;width:115px;left:3%;margin-top:6px;text-align: center;">
   <a href="javascript:void(0)" id="upload_pic" style="text-decoration: none;"> 更换头像</a>
  </div>
</div>

<div style="width:100%;margin-top:56px;">
<form id="user" class="layui-form layui-form-pane"  action="${APP_PATH}/user/updateUserInfo"> <!--method="post"   action="${APP_PATH}/user/updateUserInfo"  -->
	            <!-- ************************************接受用户资料********************************** -->
				<%-- <input type="hidden" name="user_id" value="${u.userId }"> --%>

<div style="width:50%;float:left;">
  <div class="layui-form-item">
    <label style="width:20%;float:left;height:38px;line-height:38px; padding-right:10px;  font-size:14px;text-align:right;">昵&nbsp;&nbsp;&nbsp;称</label>
    <div class="layui-input-block" style="width:62%;folat:left;">
      <input type="text" name="user_nickname"  id="user_nickname"  autocomplete="off" placeholder="请输入" class="layui-input" value="${u.userName}">
    </div>
  </div>

  
  <div class="layui-form-item">
    <label style="width:20%;float:left;height:38px;line-height:38px;padding-right:10px; font-size:14px;text-align:right;">手机号</label>
    <div class="layui-input-block" style="width:62%;folat:left;">
      <input  type="text" id="user_phone" name="user_phone"  autocomplete="off" placeholder="请输入" class="layui-input" value="${u.phone }">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label style="width:20%;float:left;height:38px;line-height:38px;padding-right:10px; font-size:14px;text-align:right;">邮&nbsp;&nbsp;&nbsp;箱</label>
    <div class="layui-input-block" style="width:62%;folat:left;">
      <input type="text" id="user_email" name="user_email" autocomplete="off" placeholder="请输入" class="layui-input" value="${u.email }">
    </div>
  </div>
  <c:set var="state0" value=""></c:set>
   <c:set var="state1" value=""></c:set>
  <c:set var="state" value="${u.sex}"></c:set>
  <c:choose>
  <c:when test="${state eq M }">
  <c:set var="state0" value="checked"></c:set>
  </c:when>
  <c:otherwise>
  <c:set var="state1" value="checked"></c:set>
  </c:otherwise>
  </c:choose>
 		
  <div class="layui-form-item">
    <label style="width:20%;float:left;height:38px;line-height:38px;padding-right:10px; font-size:14px;text-align:right;">性&nbsp;&nbsp;&nbsp;别</label>
    <div class="layui-input-block">
      <input style="visibility:visible;" type="radio"  name="sex" value="男" title="男" checked="${state0}">
      <input style="visibility:visible;" type="radio"  name="sex" value="女" title="女" checked="${state1}">  
    </div>
  </div>
  
  
  
  <div class="layui-form-item" pane="">
   <label style="width:20%;float:left;height:38px;line-height:38px;padding-right:10px; font-size:14px;text-align:right;">爱&nbsp;&nbsp;&nbsp;好</label>
    <div class="layui-input-block">
    <c:set var="check" value="" ></c:set>
    <c:set var="check0" value="" ></c:set>
      <c:set var="check1" value="" ></c:set>
        <c:set var="check2" value="" ></c:set>
       
        <c:if test="${check eq 0 }">
            <c:set var="check0" value="checked" ></c:set>
        </c:if>
        
          <c:if test="${check eq 1 }">
            <c:set var="check1" value="checked" ></c:set>
          </c:if>
        
         <c:if test="${check eq 2 }">
            <c:set var="check2" value="checked" ></c:set>
          </c:if>
    
   <input type="checkbox" name="user_hobby"value="0" title="写作" ${check0 }> 
   <input type="checkbox" name="user_hobby" value="1" title="阅读" ${check1 }> 
   <input type="checkbox" name="user_hobby" value="2" title="发呆" ${check2 }>
    </div>
  </div>
  
  
</div>
  
  
  <div style="float:left;width:50%;">
  
  <div class="layui-form-item">
    <label style="width:20%;float:left;height:38px;line-height:38px;font-size:14px;">所在地</label>
    <div class="layui-input-inline" style="margin-left:-40px; ">
      <select name="user_location">
        <option value="">请选择省</option>
        <option value="浙江" selected=""></option>
        <option value="'1'">江西省</option>
        <option value="'2'">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline"  style="margin-left:10px;">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled="">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline" style="margin-left:-40px;margin-top:8px;">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div> 
    
  <div class="layui-form-item layui-form-text">
    <label style="width:20%;float:left;height:38px;line-height:38px; font-size:14px;">签&nbsp;&nbsp;&nbsp;名</label>
    <div class="layui-input-block" style="width:80%;margin-left: 60px;">
      <textarea placeholder="请输入签名" class="layui-textarea" id="u_signature"  name="user_signiture" >${u.signiture}</textarea>
    </div>
  </div>
  
  <div class="layui-form-item"style="margin-left: 60px;" >
    <input class="layui-btn" type="button"  onclick="Sub()" value="提交"/>
  </div>
  </div>
 
</form>
</div>


</div> 
</div> 

	<div style="text-align:center;clear:both"></div>
	    <div id="main-footer" style="background-color: #aa2116">
        <p class="footer-row about-us">
            <a href="#" title="建议与反馈">建议与反馈</a>

            <a href="#" title="APP下载">APP下载</a>

            <a href="#" title="用户协议">用户协议</a>

            <a href="#" title="探索与发现">探索与发现</a>

            <a href="#" title="联系我们">联系我们</a>
            <a href="#" title="加入我们">加入我们</a>
            <a href="#" title="百度百科">百度百科</a>
        </p>
        <p class="footer-row links">
            友情链接：
            <a href="#" title="漫客网-中国第一原创动漫平台-知音漫客杂志官方网站！">斗破苍穹漫画</a>
            <a href="#"  title="轻之文库">轻之文库</a>
            <a href="#"  title="喵特">喵特</a>
            <a href="#"  title="半次元">半次元</a>
            <a href="#"  title="萌主页">萌主页</a>
            <a href="#"  title="快看漫画">快看漫画</a>
            <a href="#"  title="腾讯动漫频道">腾讯动漫频道</a>
            <a href="#"  title="178动漫频道">178动漫频道</a>
            <a href="#"  title="第一弹">第一弹</a>
            <a href="#"  title="豆腐">豆腐</a>
        </p>
        <p class="footer-row">京ICP备: 14055174号-1 | <a  href="#"><img src="${APP_PATH}/static/ulogin/Picture/beianicon.png" style="vertical-align: top;"> 京公网安备 1101050223546号</a></p>
        <p class="footer-row">大连东软信息学院 地址: 软件园路  A区 16座 电话: 0520-88888888</p>
    </div>
	<script src="${APP_PATH}/static/user/layui/layui.js" charset="utf-8"></script>
	
<script>

layui.use('form', function () {  
    var form = layui.form;  
});  

layui.use('upload', function(){
	  var upload = layui.upload;
	   var uid = $("#u_id").val();
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#upload_pic' //绑定元素
	    ,url: 'http://localhost:8080/Anime-sky/uploadUserImg' //上传接口
	    ,data: {userId : uid}
	    ,method: 'POST' 
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
              $('#picView').attr('src', result); //图片链接（base64）
            });
          }
	    ,done: function(res){
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	});

function Logout(){
	//退出登录函数
		$.ajax({
			url:"http://localhost:8080/Anime-sky/logout",
			type:"POST",
			success:function(result){
				if (result.code == 520) {
					$(location).attr("href", "http://localhost:8080/Anime-sky/homePageLink");
				}else{
				//	
				}
			}
		});
	}

</script>
</body>

</html>